// Malihu Scrollbar
// -----------------------------

.mCSB_inside > .mCSB_container {
	margin-right: 0;
}

// Waves Effect
// -----------------------------

.waves-button,
.waves-button:hover,
.waves-button:visited,
.waves-button-input {
	font-size: inherit;
	line-height: inherit;
	border: 1px solid inherit;
}


// Flot Chart
// -----------------------------

#flotTip {
	font-size: 12px;
	background-color: @light-black;
	color: @white;
	padding: 5px 8px;
	z-index: 9999;
	border-radius: 2px;
	.box-shadow-helper(1);
}

.legendColorBox {
	> div {
		border-style: none !important;
		margin: 0 3px 0 10px;
		> div {
			border-radius: 50% !important;
		}
	}
}

// Morris chart 
// -----------------------------

.morris-hover.morris-default-style {
	font-size: 12px;
	background-color: @light-black;
	color: @white;
	padding: 5px 8px;
	z-index: 1000;
	border-style: none;
	border-radius: 2px;
	.box-shadow-helper(1);
}

// Chart JS
// -----------------------------

.chartjs { 
	canvas {
		width: 100% !important;
		max-width: 1000px;
		height: auto !important;
	}
}

// Vector Map
// -----------------------------

.jvectormap-zoomout {
	top: 40px;
}

.jvectormap-zoomin, .jvectormap-zoomout {
	line-height: 24px;
	width: 24px;
	height: 24px;
	background-color: darken(@primary, 10%);
	font-weight: 700;
	font-size: 20px;
	padding: 0;
	border-radius: 50%;
	.box-shadow-helper(1);
}

// Easy Pie Chart
// -----------------------------

.easy-pie-chart {
	position: relative;
	display: inline-block;
	width: 120px;
	height: 120px;
	text-align: center;
	canvas {
		position: absolute;
		top: 0;
		left: 0;
	}
	.percent {
		&:after {
			content: '%';
			font-size: 14px;
		}
	}
}

// DataTables
// -----------------------------

.dataTables_length {
	float: left;
}

div.dataTables_filter label {
	margin-right: 15px;
}

button.ColVis_Button, ul.ColVis_collection li {
	box-shadow: none;
}

button.ColVis_Button {
	padding: 6px 15px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	height: auto;
	color: @white !important;
	background-image: none;
	background-color: @primary;
	border-color: @primary;
}

.ColVis_collection {
	background-color: @white !important;
	border-style: none !important;
	border-radius: 2px !important;
	padding: 8px !important;
	.box-shadow-helper(2);
}

ul.ColVis_collection li {
	background-image: none;
	border-style: none;
	padding: 5px;
	margin: 0;
	border: 1px solid @white;
	border-radius: 0;
	label {
		margin-bottom: 0;
		font-weight: 500;
	}
}

.ColVis_Button, ul.ColVis_collection li {
	&:hover,
	&:focus{
		outline: 0;
		background-image: none;
		box-shadow: none;
		background-color: darken(@primary, 5%);
		border-color: @primary;
		color: @white !important;
	}
}

ul.ColVis_collection li.ColVis_Special {
	border-style: none;
	background-image: none;
	padding: 5px 10px;
	&:hover {
		background-image: none;
		box-shadow: none;
		background-color: darken(@primary, 5%);
		border-color: @primary;
		color: @white !important;
	}
}

// Bootstrap Select
// -----------------------------

.bootstrap-select .dropdown-toggle:focus {
	outline: 0 !important;
}

// jQuery MiniColors
// -----------------------------

.minicolors-swatch {
	border: none;
}

// DropzoneJS
// -----------------------------

.dropzone {
	border: 2px dashed @gray;
}

.dropzone .dz-message {
	padding: 36px 0;
	margin: 0;
	font-weight: 600;
	font-size: 24px;
	color: @gray;
}

// JQuery Drag and Drop Files
// -----------------------------

.uploader div.browser label {
	background-color: @primary;
	font-weight: 600;
	padding: 6px 15px;
	display: inline-block;
	width: auto;
	font-size: 14px;
	.box-shadow-helper(1);
	&:hover {
		background-color: darken(@primary, 5%);
	}
}

// Bootstrap Dual Listbox
// -----------------------------

.bootstrap-duallistbox-container select {
	overflow-y: auto;
	border: 1px solid @primary;
	padding: 5px;
	margin-top: 15px;
}

.bootstrap-duallistbox-container .filter {
	margin-bottom: 15px;
}

// Date Range Picker
// -----------------------------

.daterangepicker .ranges li {
	border-radius: 3px;
	color: @primary;
}

.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
	background-color: @primary;
	border-color: @primary;
}

.daterangepicker .ranges .input-mini {
	border-color: @primary;
	&:focus {
		outline: 0;
	}
}

.daterangepicker td.active, .daterangepicker td.active:hover {
	background-color: @primary;
}

.daterangepicker td.start-date {
	border-radius: 2px 0 0 2px;
}
.daterangepicker td.end-date {
	border-radius: 0 2px 2px 0;
}


// Bootstrap DatetimePicker
// -----------------------------

.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover {
	background-color: @primary;
	text-shadow: none;
	border-radius: 2px;
}

.bootstrap-datetimepicker-widget a[data-action] {
	padding: 0;
}

.bootstrap-datetimepicker-widget table td span {
	margin: 0;
}

.datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover:hover, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active:focus, .datepicker table tr td span.active:hover:focus, .datepicker table tr td span.active.disabled:focus, .datepicker table tr td span.active.disabled:hover:focus, .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.active, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled:hover.active, .open .dropdown-toggle.datepicker table tr td span.active, .open .dropdown-toggle.datepicker table tr td span.active:hover, .open .dropdown-toggle.datepicker table tr td span.active.disabled, .open .dropdown-toggle.datepicker table tr td span.active.disabled:hover {
	background-color: @primary;
}

// Bootstrap Date Picker
// -----------------------------

.datepicker table tr td.active:hover, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active:focus, .datepicker table tr td.active:hover:focus, .datepicker table tr td.active.disabled:focus, .datepicker table tr td.active.disabled:hover:focus, .datepicker table tr td.active:active, .datepicker table tr td.active:hover:active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:hover.active, .open .dropdown-toggle.datepicker table tr td.active, .open .dropdown-toggle.datepicker table tr td.active:hover, .open .dropdown-toggle.datepicker table tr td.active.disabled, .open .dropdown-toggle.datepicker table tr td.active.disabled:hover {
	background-color: @primary;
	border-radius: 2px;
	border-color: @primary;
}

// Bootstrap Tags Input
// -----------------------------

.bootstrap-tagsinput {
	box-shadow: none;
	padding: 5px;
	border-radius: 2px;
	border-color: @primary;
	width: 100%;
}

// Bootstrap Slider
// -----------------------------
.slider-track {
	background-image: none;
	box-shadow: none;
	background-color: @light-gray;
	border-radius: 10px;
}

.slider-handle {
	background-color: @primary;
	background-image: none;
	box-shadow: none;
	outline: 0;
}

.slider.slider-disabled .slider-handle {
	background-image: none;
	background-color: @light-gray;
}

.slider-selection.tick-slider-selection {
	background-image: none;
	background-color: @info;
}

.slider-tick.in-selection {
	background-image: none;
	background-color: @info;
}

.slider-selection {
	box-shadow: none;
	background-image: none;
	background-color: @gray;
	border-radius: 10px;
}

.slider.slider-horizontal .slider-tick.triangle, .slider.slider-horizontal .slider-handle.triangle {
	border-bottom-color: @primary;
	border-width: 0 10px 20px 10px;
	margin-top: -5px;
}

// Mprogress.js
// -----------------------------

.mprogress {
	margin-bottom: 20px;
    width: 100%;
    height: 3px;
}

// Summernote
// -----------------------------

.note-editor {
	border: 1px solid @light-gray;
}

.note-editor .note-toolbar {
	border-bottom: 1px solid @light-gray;
}

.note-editor .note-statusbar .note-resizebar {
	border-top: 1px solid @light-gray;
}

// Bootstrap Markdown
// -----------------------------

.md-editor.active {
	border-color: @light-gray;
	box-shadow: none;
}

.md-editor > textarea {
	background-color: #fff;
	border-top: 1px solid @light-gray;
	border-bottom: none;
	padding: 10px;
}

.md-editor > .md-preview {
	border-top: 1px solid @light-gray;
	border-bottom: none;
}

// Toastr
// -----------------------------

#toast-container>.toast-success,
#toast-container>.toast-info,
#toast-container>.toast-warning,
#toast-container>.toast-error {
	background-image: none !important;
}
#toast-container>div {
	padding: 15px 20px;
	opacity: .9;
	border-radius: 2px;
	.box-shadow-helper(1);
}
#toast-container>:hover {
	.box-shadow-helper(2);
}
.toast-close-button {
	height: 20px;
	width: 20px;
}
.toast-success {
	background-color: @success; 
}
.toast-info {
	background-color: @info;
}
.toast-warning {
	background-color: @warning;
}
.toast-error {
	background-color: @danger;
}

// jQuery Steps
// -----------------------------

.wizard > .steps a, .wizard > .steps a:hover, .wizard > .steps a:active {
	margin: 5px;
	border-radius: 0;
	padding: 15px
}
.wizard > .steps .current a, .wizard > .steps .current a:hover, .wizard > .steps .current a:active {
	background-color: @primary;
}
.wizard > .steps .done a, .wizard > .steps .done a:hover, .wizard > .steps .done a:active {
	background-color: @light-gray;
}
.wizard > .steps .disabled a, .wizard > .steps .disabled a:hover, .wizard > .steps .disabled a:active {
	color: @gray;
	.number {
		border-color: @gray;
	}
}
.wizard > .content {
	background-color: transparent;
	margin: 0 5px;
	border-radius: 0;
	min-height: 200px;
}
.wizard > .content > .body {
	width: 100%;
	height: 100%;
	padding: 15px;
	position: static;
}
.wizard > .steps .number {
	font-size: 24px;
	border-radius: 50%;
	border: 2px solid @white;
	width: 38px;
	display: inline-block;
	font-weight: 700;
	text-align: center;
}
.wizard > .actions .disabled a, .wizard > .actions .disabled a:hover, .wizard > .actions .disabled a:active {
	opacity: .65;
	background-color: @gray;
	color: @white;
	cursor: not-allowed;
}
.wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active {
	background-color: @primary;
	font-weight: 600;
	border-radius: 2px;
	.box-shadow-helper(1);
}
// Image Cropper
// -----------------------------

.img-container,
.img-preview {
	background-color: #f7f7f7;
	overflow: hidden;
	width: 100%;
	text-align: center;
}
.img-container {
	min-height: 200px;
	max-height: 554px;
	margin-bottom: 20px;
}

@media (min-width: 768px) {
	.img-container {
		min-height: 554px;
	}
}

.img-container > img {
	max-width: 100%;
}

.docs-preview {
	margin-right: -15px;
	margin-bottom: 10px;
}

.img-preview {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

.img-preview > img {
	max-width: 100%;
}

.preview-lg {
	width: 263px;
	height: 148px;
}

.preview-md {
	width: 139px;
	height: 78px;
}

.preview-sm {
	width: 69px;
	height: 39px;
}

.preview-xs {
	width: 35px;
	height: 20px;
	margin-right: 0;
}

.docs-data > .input-group {
	margin-bottom: 10px;
}

.docs-data > .input-group > label {
	min-width: 80px;
}

.docs-data > .input-group > span {
	min-width: 50px;
}

.docs-buttons > .btn,
.docs-buttons > .btn-group,
.docs-buttons > .form-control {
	margin-right: 5px;
	margin-bottom: 10px;
}

.docs-toggles > .btn,
.docs-toggles > .btn-group,
.docs-toggles > .dropdown {
	margin-bottom: 10px;
}

.docs-tooltip {
	display: block;
	margin: -6px -12px;
	padding: 6px 12px;
}

.docs-tooltip > .icon {
	margin: 0 -3px;
	vertical-align: top;
}

.tooltip-inner {
	white-space: normal;
}

.btn-upload .tooltip-inner {
	white-space: nowrap;
}

@media (max-width: 400px) {
	.btn-group-crop {
		margin-right: -15px!important;
	}
	.btn-group-crop > .btn {
		padding-left: 5px;
		padding-right: 5px;
	}
	.btn-group-crop .docs-tooltip {
		margin-left: -5px;
		margin-right: -5px;
		padding-left: 5px;
		padding-right: 5px;
	}
}

.docs-options .dropdown-menu {
	width: 100%;
}

.docs-options .dropdown-menu > li {
	padding: 5px 20px;
	.checkbox {
		margin: 5px 0;
	}
}

.docs-options .dropdown-menu > li:hover {
	background-color: #f7f7f7;
}

.docs-options .dropdown-menu > li > label {
	display: block;
}

.docs-cropped .modal-body {
	text-align: center;
}

.docs-cropped .modal-body > img,
.docs-cropped .modal-body > canvas {
	max-width: 100%;
}